<template>
  <div class="world">
    <div class="card-content" ref="cardRef">
      <!-- group -->
      <div 
        class="left-container"
        ref="leftContainerRef"
        :style="{ userSelect: dividerDrag ? 'none' : 'auto' }"
      >
        <LeftGroup ref="leftGroup" @select="handleSelectGroupItem"></LeftGroup>
      </div>
      <!-- divider -->
      <div class="resize-divider" ref="resizeRef" draggable="false">
        <div
          draggable="false"
          class="divider-icon"
          @mousedown="resizeDiv"
        >
          <i class="iconfont icon-paixu" />
        </div>
      </div>
      <!-- grid -->
      <div
        class="right-container"
        :style="{ userSelect: dividerDrag ? 'none' : 'auto' }"
      >
        <div class="right-header">
          <div>
            <i :class="selectGroupItem.id == 0 ? 'el-icon-map-location' : 'el-icon-collection-tag'"></i>
          </div>
          <div style="margin-left: 10px;">
            <span>{{selectGroupItem.name}}</span>
          </div>
          <div style="margin-left: 100px;">
            <span style="color: #1677FF;">{{selectGroupItem.num}}</span>
            <span>个</span>
          </div>
        </div>
        <div class="right-content">
          <div class="addOperation">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="addApp">添加应用</el-button>
          </div>
          <el-empty v-show="appList && appList.length == 0" description="暂无应用"></el-empty>
          <div 
            class="hasDataContainer" 
            v-show="appList && appList.length > 0"
            id="sortApp"
          >
            <div
              v-for="item in appList"
              :key="item.id"
              class="appItem"
            >
              <div class="appItem_img">
                <img src="../../../assets/images/app.jpg" alt="">
              </div>
              <div class="title">
                <span>{{item.name}}</span>
              </div>
              <div class="operation">
                <el-popconfirm
                  :title="'确定要删除' + item.name + '吗？'"
                  @confirm="handleDelete(item)"
                  :id="'appDeletePop_' + item.id"
                >
                  <el-tooltip slot="reference" effect="dark" content="删除" placement="top">
                    <el-button type="text">
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </el-tooltip>
                </el-popconfirm>
                <el-button type="text" class="handleSort">
                  <i class="el-icon-rank"></i>
                </el-button>              
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加应用"
      :visible.sync="dialogVisible"
      width="400px"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <el-form ref="formData" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="分组：" prop="groupId">
          <el-select v-model="form.groupId" placeholder="请选择分组">
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="name">
          <el-input 
            v-model="form.name" 
            placeholder="请输入名称" 
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveApp" :loading="comfirmLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LeftGroup from './LeftGroup.vue'
import Sortable from 'sortablejs'
import moment from 'moment'

export default {
  name:'DragSort',
  components: {
    LeftGroup
  },
  data() {
    return {
      dividerDrag: false,
      selectGroupItem: {},
      appList: [],
      loading: false,
      dialogVisible: false,
      comfirmLoading: false,
      form: {
        groupId: undefined,
        name: ''
      },
      rules: {
        groupId: [
          { required: true, message: "请选择分组", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入名称", trigger: "change" },
        ],
      },
      groupList: []
    }
  },
  methods: {
    moment,
    resizeDiv() {
      this.dividerDrag = true
      let leftBoundary = this.$refs.cardRef.getBoundingClientRect().left + 1
      let that = this
      document.onmousemove = function (eveMove) {
        let endX = eveMove.clientX
        that.$refs.leftContainerRef.style.width = endX - leftBoundary + 'px'
      }
      // 鼠标松开事件
      document.onmouseup = function () {
        that.dividerDrag = false
        document.onmousemove = null
        document.onmouseup = null
        that.$refs.resizeRef.releaseCapture && that.$refs.resizeRef.releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      }
      this.$refs.resizeRef.setCapture && this.$refs.resizeRef.setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false
    },
    handleSelectGroupItem(item) {
      if(this.selectGroupItem != item.id) {
        this.loading = true
        this.selectGroupItem = item
        this.appList = []
        if(item.num > 0) {
          let list = []
          for(let i = 0; i < item.num; i++) {
            let data = {
              id: i+1,
              name: '应用'+(i+1)
            }
            list.push(data)
          }
          this.appList = list
        }
        this.loading = false
        this.$nextTick(()=>{
          this.createSort()
        })
      }
    },
    handleDelete(item) {
      this.loading = true
      let index = this.appList.findIndex(x=>x.id == item.id)
      this.appList.splice(index, 1)
      this.$refs.leftGroup.deleteOneByNum(this.selectGroupItem)
      this.loading = false
    },
    createSort() {
      let el = document.getElementById('sortApp')
      Sortable.create(el, {
        ghostClass: 'sortable-ghost',
        // direction: 'horizontal',
        disabled: false,
        removeCloneOnHide: true,
        group: 'app',
        handle: '.handleSort',
        animation: 300,
        onEnd: (evt) => {
          let oldIndex = evt.oldIndex
          let newIndex = evt.newIndex
          let oldItem = this.appList[oldIndex]
          this.appList.splice(oldIndex, 1)
          this.appList.splice(newIndex, 0, oldItem)
        },
      })
    },
    addApp() {
      this.form = {
        groupId: undefined,
        name: ''
      }
      this.groupList = this.$refs.leftGroup.transformGroupList()
      this.comfirmLoading = false
      this.dialogVisible = true
      this.$nextTick(()=>{
        if(this.$refs.formData) {
          this.$refs.formData.clearValidate()
        }
      })
    },
    saveApp() {
      this.comfirmLoading = true
      this.$refs["formData"].validate((valid) => {
        if(valid) {
          if(this.selectGroupItem.id == this.form.groupId) {
            this.appList.push({
              id: moment().valueOf(),
              name: this.form.name
            })
          }
          this.$refs.leftGroup.addOneByNum(this.form.groupId)
          this.dialogVisible = false
        } else {
          this.comfirmLoading = false
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
  .world {
    width: 100%;
    height: 100%;
    background-color: #eaeaea;
    padding: 16px;
    overflow: auto;
    .card-content {
      width: 100%;
      height: 100%;
      display: flex;
      background-color: transparent;
      border-radius: 6px;
      min-height: 300px;
      .left-container {
        background-color: white;
        flex-shrink: 0;
        width: 40%;
        height: 100%;
        min-width: 30%;
        max-width: 60%;
      }
      .resize-divider {
        width: 1px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        // border-radius: 1px 0px 0px 1px;
        .divider-icon {
          position: absolute;
          left: -7.5px;
          cursor: col-resize;
        }
      }
      .right-container {
        background-color: white;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        .right-header {
          width: 100%;
          height: 51px;
          border-bottom: 1px solid #eee;
          flex-shrink: 0;
          padding: 0 16px;
          display: flex;
          align-items: center;
        }
        .right-content {
          flex: 1;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .addOperation {
            margin-bottom: 16px;
            flex-shrink: 0;
            width: 100%;
            padding: 16px 16px 0 16px;
          }
          .hasDataContainer {
            padding: 0 16px;
            flex: 1;
            overflow-x: hidden;
            overflow-y: auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, 253px);
            column-gap: 8px;
            justify-content: space-between;
            align-content: start;

            .appItem {
              width: 253px;
              height: 88px;
              margin-bottom: 16px;
              border-radius: 3px;
              border: 1px solid #CDDFDD;
              padding: 0 16px;
              display: flex;
              align-items: center;
              .appItem_img {
                width: 44px;
                height: 44px;
                margin-right: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .title {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .operation {
                margin-left: 10px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;
                .handleSort {
                  cursor: grab;
                }
              }
            }
            .appItem:hover {
              background: rgba(230, 244, 255, 0.6);
              border: 1px solid #91CAFF;
              box-shadow: 0px 0px 8px 0px rgba(15, 39, 38, 0.18);
            }
          }
        }
      }
    }
  }
</style>